<template>
  <div class="error404" :style="{ background: `url(${imageUrl}) no-repeat` }">
    <div style="flex: 1"></div>
    <div class="content">
      <p class="code">{{ code }}</p>
      <p class="message">{{ message }}</p>
      <el-button type="primary" @click="goUrl">{{ goTitle }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const props = defineProps({
  imageUrl: {
    type: String,
    default: 'src/assets/images/error_images/404.png',
  },
  code: {
    type: String,
    default: '404',
  },
  message: {
    type: String,
    default: '抱歉，你无权访问该页面',
  },
  goTitle: {
    type: String,
    default: '返回首页',
  },
  //跳转的路由路径
  url: {
    type: String,
    defalut: './home',
  },
})
const $router = useRouter()

const goUrl = () => {
  $router.push(props.url as any)
}
</script>

<script lang="ts">
export default {
  name: '404',
}
</script>

<style scoped lang="scss">
.error404 {
  width: 1010px;
  height: 600px;
  background-size: 100% 100%;
  display: flex;
  .content {
    flex: 1;
    line-height: 65px;
    .code {
      font-size: 50px;
      font-weight: 600;
    }
    .message {
      font-size: 13px;
    }
  }
}
</style>
